<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <title>空管青春故事汇</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/views.css" rel="stylesheet" type="text/css"/>
</head>
<body oncontextmenu="return false">
<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">各地区、分局（站）团委</a>
            </div>
        </div>
    </nav>
    <div class="panel-group" id="accordion">

    </div>
    <div class="footer">该页面由成都终端管制室制作</div>
</div>
<script type="text/javascript">
    f();

    function f() {
        $.getJSON("data.ng.json", function (result) {
            $.each(result, function (idx, group) {
                //group
                let head = $("<div class='panel-heading'></div>").append($("<h4 class='panel-title'></h4>").append($("<a data-toggle='collapse' data-parent='#accordion'></a>").attr("href", "#collapse_" + group.id).html(group.name + ": " + group.data.length)));
                let row = $("<div class='row'></div>");
                $.each(group.data, function (idx, line) {
                    //line
                    let cell = $("<div class='col-xs-4 col-md-2 col-cell'></div>");
                    let cell_content = $("<div class='cell'></div>");
                    let url = "https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=" + line.biz + "&scene=126#wechat_redirect";
                    //let qrurl="http://weixin.qq.com/r/"+line.qr;
                    //let qrcodr="https://open.weixin.qq.com/qr/code?username="+line.wx;
                    let ico = "img/icons/" + line.ico + ".jpg";
                    cell_content.attr("onclick", "window.location.assign('" + url + "')");
                    cell_content.append($("<img class='icon' />").attr("width", "90%").attr("src", ico));
                    cell_content.append($("<p class='subtxt'></p>").html(line.name));
                    cell.append(cell_content);
                    row.append(cell);
                });
                let content = $("<div class='panel-collapse collapse'></div>").append($("<div class='panel-body'></div>").append($("<div class='container-fluid'></div>").append(row))).attr("id", "collapse_" + group.id);
                group.data.length > 0 ? $("#accordion").append($("<div class='panel panel-success'></div>").append(head).append(content)) : $("#accordion").append($("<div class='panel panel-default'></div>").append(head).append(content));
            });
            let panels = $(".panel-collapse");
            panels.each(function (idx, panel) {
                setTimeout(function () {
                    idx == 0 ? $(panel).collapse("show") : null;
                }, 600);

            });
        });
    }
</script>
</body>
</html>